<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #container{
            width: 150px;
            border: 2px solid black;
            margin: 50px auto;
            padding: 2px 5px;
            background-color: lightgreen;
        }
        .list{
            padding: 5px;
        }
        .list>h2{
            font-size: 20px;
            user-select: none;
        }
        .list>ul{
            padding-left: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="list">
            <h2>我的好友</h2>
            <ul>
                <li>刘德华</li>
                <li>张学友</li>
                <li>黎明</li>
                <li>郭富城</li>
            </ul>
        </div>
        <div class="list">
            <h2>我的姐妹</h2>
            <ul>
                <li>关晓彤</li>
                <li>白露</li>
                <li>金晨</li>
                <li>杨颖</li>
            </ul>
        </div>
        <div class="list">
            <h2>我的黑名单</h2>
            <ul>
                <li>吴亦凡</li>
                <li>鹿晗</li>
                <li>张艺兴</li>
                <li>黄子韬</li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $('.list>h2').click(function(){
            $(this).next().slideToggle()

            // 手风琴效果
            /* if($(this).next().css("display")==='none'){
                $(this).next().slideDown()
                $(this).parent().siblings().find('ul').slideUp()
            }else{
                $(this).next().slideUp()
                $(this).parent().siblings().find('ul').slideDown()
            } */
        })
    </script>
</body>
</html>